<template>
  <view class="body">
    <CustmNavBar :title="pageTitle" :dark="false">
      <template #right>
        <image
          @click="addAccount"
          src="/static/images/icon/add.png"
          mode="scaleToFill"
          style="width: 50rpx; height: 50rpx"
        />
      </template>
    </CustmNavBar>

    <view class="list">
      <BgEmpty :content="t('No data')" />
    </view>
    <CustomModel
      :visible="show"
      :formConfig="[
        { label: t('Name'), key: 'name', placeholder: t('Enter') },
        {
          label: t('Phone'),
          key: 'phone',
          type: 'phone',
          placeholder: t('Enter'),
        },
      ]"
      @submit="onSubmit"
      @hide="close"
    />
  </view>
</template>

<script setup>
import CustmNavBar from "@/components/CustomNavBar/index.vue";
import CustomModel from "@/components/CustomModel/index.vue";
import BgEmpty from "@/components/BgEmpty";
import { useI18n } from "vue-i18n";
import { ref } from "vue";

const { t } = useI18n();

const pageTitle = t("Sub-Account Management");
const show = ref(false);

const addAccount = () => {
  show.value = true;
  console.log("addAccount");
};

const onSubmit = (e) => {
  console.log("onSubmit", e);
  show.value = false;
};

const close = () => {
  show.value = false;
};
</script>

<style lang="scss" scoped>
.body {
  display: flex;
  height: 100vh;
  flex-direction: column;
  .list {
    flex: 1;
  }
}
</style>
